
import Head from 'next/head'
import Layout from '../../components/layouts/default'
import { getAllTags } from '../../lib/paginationPosts'
import { makeStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
import Typography from '@material-ui/core/Typography';
import Link from 'next/link';

const useStyles = makeStyles(({ breakpoints, spacing, palette }) => ({
  tagContainer: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  chip: {
    marginBottom: spacing(2),
    marginRight: spacing(2)
  }
}))
export default function ({ tags }) {
  const classes = useStyles()
  return <Layout>
    <Head>
      <title>标签</title>
    </Head>
    <div>
      <Typography variant="h4" gutterBottom>
        标签
      </Typography>
      <div className={classes.tagContainer}>
        {
          tags.map(tag => <div className={classes.chip}><Link href={`/tags/${tag}`}><Chip
            avatar={null}
            label={tag}
            clickable
            color="primary"
          /></Link></div>)
        }
      </div>
    </div>
  </Layout>
}

export async function getStaticProps() {
  const tags = getAllTags()
  return {
    props: {
      tags
    }
  }
}
